<template>
  <div class="container">
    <div class="prductname">{{name}}</div>
    <div class="form">
      <div class="formitem" v-for="(item, index ) in form" :key="'item'+index">
        <div class="title">{{item.fieldName}}</div>
        <div class="item">
          <input
            :type="item.fieldType"
            :placeholder="'请输入'+item.fieldName"
            v-model="formValue[item.fieldAlias]"
          />
        </div>
      </div>
    </div>

    <div class="foot">
      <div>
        <!-- <img src="./../assets/images/product/phone.png" alt />
        <div>手机</div> -->
      </div>
      <div>
        <!-- <img src="./../assets/images/product/weixin.png" alt />
        <div>微信</div>-->
      </div>

      <div>
        <van-button type="default" color="#DBB47F" style="width:100%" @click="submit()">提 交</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import Api from "./../api/api";

export default {
  data() {
    return {
      headerBg: {
        backgroundImage:
          "url(" + require("./../assets/images/product/bg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      money: "",
      name: "",
      userId: "",
      phone: "",
      form: [],
      formValue: {},
      id: "",
      name: ""
    };
  },
  methods: {
    submit() {
      let formValue = this.formValue;
      let fommlength = this.form.length;
      let i = 0;

      Object.keys(formValue).forEach(function(key) {
        if (formValue[key] == "") {
          Toast("请填写完整");
          return false;
        } else {
          i++;
        }
      });

      if (i == fommlength) {
        Dialog.confirm({
          message: "是否确认提交"
        })
          .then(() => {
            this.sentData(formValue);
          })
          .catch(() => {});
      }
    },

    sentData(obj) {
      this.$axios
        .post(Api.HTTP.submit, {
          productId: this.id,
          employeeCode: localStorage.getItem("employeeCode"),
          customerId:localStorage.getItem('customerId'),
          orderDetails: obj
        })
        .then(res => {
          if (res.data.success) {
            Toast("提交成功");
            setTimeout(() => {
              this.$router.push({
                path: "/HomePage"
              });
            }, 1000);
          } else {
            Toast("提交失败");
            setTimeout(() => {
              this.$router.push({
                path: "/HomePage"
              });
            }, 1000);
          }
        })
        .catch(function(error) {
          Toast("网络错误");
          console.log(error);
        });
    },
    getform(id) {
      this.$axios
        .get(`${Api.HTTP.searchForm}?productId=${id}`)
        .then(res => {
          console.log(res);
          this.form = res.data;
          let arr = res.data;
          arr.forEach(el => {
            this.$set(this.formValue, el.fieldAlias, "");
          });
        })
        .catch(function(error) {
          Toast("网络错误");
        });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;

    this.getform(this.$route.query.id);
    // this.getform('6ae9286f38b14f82bd5ba8e7c22fb32d');
  }
};
</script>
<style scoped>
.prductname {
  padding: 0.25rem;
  font-size: 0.32rem;
}
.form {
  background: #fff;
  padding: 0.25rem;
}
.formitem {
  margin-bottom: 0.2rem;
}
.item {
  padding-top: 0.23rem;
  padding-bottom: 0.24rem;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}
input {
  outline: none;
  border: 0px;
  font-size: 0.32rem;
}
input ::placeholder {
  font-size: 0.32rem;
  color: #c5cad5;
}
.container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-bottom: 1.2rem;
  background: #f5f5f5;
  overflow: hidden;
  overflow-y: auto;
}

.foot {
  padding: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  display: flex;
  justify-items: center;
  box-sizing: border-box;
  height: 1.2rem;
  width: 100%;
  position: fixed;
  bottom: 0%;
  background: #fff;
  justify-content: space-between;
}
.foot div:nth-child(1) {
  width: 0.45rem;
  text-align: center;
}
.foot img {
  width: 0.45rem;
  text-align: center;
  height: 0.4rem;
}
.foot div:nth-child(1) {
  width: 15%;
  font-size: 0.2rem;
  text-align: center;
}
.foot div:nth-child(2) {
  font-size: 0.2rem;
  text-align: center;
}
.foot div:nth-child(3) {
  width: 60%;
}
</style>